<template>
  <a-layout style="height: 746px">

    <!--  侧边栏  -->
    <a-layout-sider theme="dark"  v-model:collapsed="collapsed" :trigger="null" collapsible >
      <div class="logo" />

      <router-link :to="path">
        <a-menu
          theme="dark"
          v-model:openKeys="state.openKeys"
          v-model:selectedKeys="state.selectedKeys"
          mode="inline"
          :inline-collapsed="state.collapsed"
          :items="items"
        ></a-menu>
      </router-link>

    </a-layout-sider>
    <a-layout>

    <!--  头部    -->
      <a-layout-header class="awsCenter" style="background: #fff; padding: 0;border: 0px black solid;display: flex;flex-direction: row">
        <menu-unfold-outlined
          v-if="collapsed"
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />

        <menu-fold-outlined  v-else class="trigger" @click="() => (collapsed = !collapsed)" />

        <text style="margin-left: 20px;font-weight: bolder;font-family: FangSong;
  font-size: 15px;color: black">{{front}} {{modelTitle}}</text>

        <div style="display: flex;margin-left: auto;border: 0px black solid;margin-right: 20px;height: 50px">
          <img v-if="userData.gender==='男'" style="width: 60px" src="../assets/boy.png">
          <img v-else style="width: 60px" src="../assets/girl.png">
          <div style="border: 0px blue solid;" class="awsCenter">
            <el-col :span="8">
              <el-dropdown trigger="click">
              <span style="display: flex;flex-direction: row;margin-top: 25px;"  >
                <text style="font-family: 'STSong';width: 50px;border: 0px black solid">{{userData.nickname}}</text>
                <el-icon ><arrow-down /></el-icon>
              </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="showAndValue(1)">设置首页</el-dropdown-item>
                    <el-dropdown-item @click="showAndValue(2)">发布公告</el-dropdown-item>
                    <el-dropdown-item @click="logOut">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-col>
          </div>


        </div>

      </a-layout-header>

    <!--   内容   -->
      <a-layout-content
        :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
      >
        <router-view></router-view>
      </a-layout-content>
    </a-layout>

    <el-dialog
      :title="title"
      v-model="showAnnounce"
      width="35%"
      @close="cleanAnnounceForm"
    >
      <el-form :model="announceForm" ref="formRef" label-width="100px">
        <el-form-item label="发布人" prop="authorName">
          <el-input style="width: 200px" v-model="announceForm.authorname" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input style="width: 200px" v-model="announceForm.title" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="announcementContent">
          <el-input
            style="width: 480px"
            type="textarea"
            v-model="announceForm.announcementcontent"
            placeholder="请输入内容"
            :rows="6"
          ></el-input>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <div  class="dialog-footer">
          <el-button @click="cleanAnnounceForm();showAnnounce=false">取 消</el-button>
          <el-button type="primary" @click="announce()">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </a-layout>
</template>
<script lang="ts" setup>
import router from "@/router/index.js";
import { ElMessage, ElNotification } from 'element-plus'
import {useUserStore} from "@/stores/user/user.js";
import { ArrowDown,Plus } from '@element-plus/icons-vue'
import {announceService,saveTextService,updateTextService,getTextService} from '@/api/announce.js'
const userStore=useUserStore()

const cleanAnnounceForm=(()=>{
  announceForm.value={
    authorname:'',
    title:'',
    announcementcontent:'',
  }

})
//发布公告
const title=ref('')
const showFlag=ref(0)

const showAndValue=((flag)=>{
  if(flag===1){
    title.value="设置首页"
    announceForm.value.title=homepageForm.value.sectionName
    announceForm.value.authorname=homepageForm.value.modifiedBy
    announceForm.value.announcementcontent=homepageForm.value.textContent

    announceForm.value.authorname=userStore.user.realname
    showAnnounce.value=true
    showFlag.value=1
  }else if(flag===2){
    title.value="发布公告"
    announceForm.value.authorname=userStore.user.realname
    showAnnounce.value=true
    showFlag.value=2
  }

})
const homepageForm=ref({
  id:'',
  sectionName:'',
  textContent:'',
  modifiedBy:''
})


const showAnnounce=ref(false)
const announceForm=ref({
  authorname:'',
  title:'',
  announcementcontent:'',
})
const announce=(async ()=>{

  if (!announceForm.value.authorname){
    ElMessage.warning("未填写发布人")
  }else if(!announceForm.value.title){
    ElMessage.warning("未填写标题")
  } else if (!announceForm.value.announcementcontent){
    ElMessage.warning("未填写内容")
  }else {
    if(showFlag.value===1){
      homepageForm.value.sectionName=announceForm.value.title
      homepageForm.value.modifiedBy=announceForm.value.authorname
      homepageForm.value.textContent=announceForm.value.announcementcontent

      //console.log(homepageForm.value)
      //第一次新增
      if (!homepageForm.value.id){
        const res=await saveTextService(homepageForm.value)
        if (res.code===200){
          ElMessage.success(res.message)
          showAnnounce.value=false
        }else {
          ElMessage.warning(res.errMsg)
        }
        //修改
      }else{
        const res=await updateTextService(homepageForm.value)
        if (res.code===200){
          ElMessage.success(res.message)
          showAnnounce.value=false
        }else {
          ElMessage.warning(res.errMsg)
        }
      }

    }else if(showFlag.value===2){
      const res=await announceService(announceForm.value)
      if (res.code===200){
        ElMessage.success(res.message)
        showAnnounce.value=false
      }else {
        ElMessage.warning(res.errMsg)
      }
    }

  }




})


const logOut=(()=>{
  ElMessage.success("退出登录")
  userStore.logout()
  router.push('/')
})

const userData=ref({})
onMounted( async () => {

  //获取首页信息数据
  await getText()

  //查询当前用户信息，如果有信息直接进行登录
  try {
    await getUser()
  }catch (error){
    console.log(error)
  }
  if (userStore.user){
    userData.value=userStore.user
  }

  console.log("查询是否有申请")
  const res=await checkConService()
  if (res.code===200){
    if (res.data){
      ElNotification({
        title: '提示',
        dangerouslyUseHTMLString: true,
        message: '<div>您有咨询师申请待审核&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-button id="checkLink" link type="primary">点击查看</el-button></div>',
        duration: 0,
      })
      document.getElementById('checkLink').addEventListener('click', gotoCheck);
    }
  }

});



function gotoCheck() {
  // 在这里编写点击链接后要执行的操作

  state.selectedKeys=['userManagement']
  state.openKeys=['management']
  path.value=('/layout/userManagement')
  router.push({ path: '/layout/userManagement', query: { userType: 'counselor' }})

}


const getText=(async ()=>{
  const res=await getTextService()
  if (res!=undefined&&res.code===200){
    //console.log(res)
    homepageForm.value={...res.data[0]}
  }
})


const getUser=(async ()=>{
  const res=await getUserService()
  if (res!=undefined&&res.code===200){
    //存储用户信息
    userStore.setUser(res.data)
    //跳转到导航页
    if (res.data!==null){
      await router.push('/layout')
    }
  }
})
import {h, onMounted, reactive, ref, watch} from 'vue';
import {
  CalendarOutlined,
  LeftOutlined,
  DownOutlined,
  AppstoreOutlined,
  AppstoreTwoTone,
  UploadOutlined,
  ProfileFilled,
  QuestionCircleOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  MailOutlined,
  SettingOutlined,
  BarChartOutlined,
  TeamOutlined,
  UserOutlined,
  SolutionOutlined,
  FileTextOutlined,
  MessageOutlined,

} from '@ant-design/icons-vue';
import { checkConService, getUserService } from '@/api/user.js'
import {theme} from "ant-design-vue";
const collapsed = ref<boolean>(false);

const state = reactive({
  collapsed: false,
  selectedKeys: [],
  openKeys: [],
  preOpenKeys: [],
});
const items = ref([
  {
    key: 'userManagement',
    icon: () => h(UserOutlined), // 更换为数据分析相关的图标
    label: '用户管理',
    title: '用户管理',
    path: '/layout/userManagement'
  },
  {
    key: 'uploadReview',
    icon: () => h(SolutionOutlined),
    label: '纹样审核',
    title: '纹样审核',
    path: '/layout/uploadReview'
  },
  {
    key: 'patternLibrary',
    icon: () => h(TeamOutlined), // 更换为团队或咨询室相关的图标
    label: '纹样库',
    title: '纹样库',
    path: '/layout/patternLibrary'
  },
  {
    key: 'management',
    icon: () => h(UserOutlined), // 更换为用户管理相关的图标
    label: '信息管理',
    title: '信息管理',
    children: [
      {
        key: 'userManagement',
        icon: () => h(UserOutlined), // 用户信息图标
        label: '用户信息',
        title: '用户信息',
        path: '/layout/userManagement'
      },
      {
        key: 'counselor',
        icon: () => h(SolutionOutlined), // 咨询师信息图标
        label: '咨询师信息',
        title: '咨询师信息',
        path: '/layout/counselor'
      },
    ]
  },
  {
    key: 'Recording',
    icon: () => h(FileTextOutlined), // 更换为记录管理相关的图标
    label: '记录管理',
    title: '记录管理',
    children: [
      {
        key: 'booking',
        icon: () => h(CalendarOutlined), // 预约记录图标
        label: '预约记录',
        title: '预约记录',
        path: '/layout/booking'
      },
      {
        key: 'feedback',
        icon: () => h(MessageOutlined), // 反馈记录图标
        label: '反馈记录',
        title: '反馈记录',
        path: '/layout/feedback'
      },
    ]
  }
]);

const path=ref('/layout/dataAnalysis')
const getByKey=((value)=>{
  const openKey=value.openKeys[0]
  const selectKey=value.selectedKeys[0]

  for (let i = 0; i < items.value.length; i++) {
    const list=items.value[i].children
    if (list!=null){
      for (let j = 0; j < list.length; j++) {
        if (openKey){
          if (list[j].key===selectKey){
            path.value=list[j].path
            front.value=items.value[i].title
            modelTitle.value='/ '+list[j].title
          }
        }
      }
    }else {
      if (items.value[i].key===selectKey){
        path.value=items.value[i].path
        front.value=items.value[i].title
        modelTitle.value=''
      }

    }
  }



})
const front=ref("数据分析")

const modelTitle=ref('')

// 监听 count 的变化
watch(state, (newVal, oldVal) => {
  console.log("变化了")
  const openKey=newVal.openKeys[0]
  const selectKey=newVal.selectedKeys[0]
  if (!openKey&&selectKey){
    const list=[...items.value[3].children,...items.value[4].children]
    console.log(selectKey)
    list.forEach(item=>{

      if (item.key===selectKey){
        console.log("执行了跳转")
        router.push(item.path)
        front.value=''
        modelTitle.value=item.title
      }
    })

  }
  getByKey(newVal)
});



</script>
<style>


.awsCenter{
  display: flex;
  align-items: center;
}

.logo{
  height: 100px;
  margin-bottom: 20px;
}

#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
  margin: 16px;
}

.site-layout .site-layout-background {
  background: #fff;
}
</style>
